<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title>Cytoscape Web example</title>
		<!-- JSON support for IE (needed to use JS API) -->
		<script type="text/javascript" src="js/cytoscape_web/json2.min.js"></script>
		<!-- Flash embedding utility (needed to embed Cytoscape Web) -->
		<script type="text/javascript" src="js/cytoscape_web/AC_OETags.min.js"></script>
		<!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
		<script type="text/javascript" src="js/cytoscape_web/cytoscapeweb.min.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				// initialization options
				var options = {
					// where you have the Cytoscape Web SWF
					swfPath : "swf/CytoscapeWeb",
					// where you have the Flash installer SWF
					flashInstallerPath : "swf/playerProductInstall"
				};
				// id of Cytoscape Web container div
				var div_id = "cytoscapeweb";

				// you could also use other formats (e.g. GraphML) or grab the network data via AJAX
				var networ_json = {
					data: {
						nodes: [{
							id:"cluster 1",
							label:"cluster 1",
							network:{
								nodes:[
									{id:"1",label:"1"},
									{id:"2",label:"2"},
									{id:"3",label:"3"}
								]
							}
						},
						{
							id: "cluster 2",
							label:"cluster 2",
							network:{
								nodes:[
									{id:"5",label:"5"},
									{id:"6",label:"6"},
									{id:"7",label:"7"},
									{
										id:"cluster 3",
										label:"cluster 3",
										network:{
											nodes:[
												{id:"8",label:"8"},
												{id:"9",label:"9"},
												{
													id:"Cluster 4",
													label:"Cluster 4",
													network:{
														nodes:[
															{id:"10",label:"10"},
															{id:"11",label:"11"}
														]
													}
												}
											]
										}
									}
								]
							}
						}],
						edges : [
							{id:"2to1",target:"2",source:"1"},
							{id:"2to3",target:"2",source:"3"},
							{id:"5to6",target:"6",source:"5"},
							{id:"6to7",target:"7",source:"6"},
							{id:"2to5",target:"5",source:"2"},
							{id:"1to6",target:"6",source:"1"},
							{id:"1to8",target:"8",source:"1"},
							{id:"8to9",target:"9",source:"8"},
							{id:"8to6",target:"6",source:"8"},
							{id:"10to11",target:"11",source:"10"},
							{id:"9to10",target:"10",source:"9"},
							{id:"8to11",target:'11',source:"8"}
						]
					},
					dataSchema: {
						nodes:[
							{name:"id",type:"string"},
							{name:"label",type:"string"}
						],
					}
				};
				// init and draw
				var vis = new org.cytoscapeweb.Visualization(div_id, options);
				vis.draw({
					network:networ_json,
					layout:'Radial'
				});
			};

		</script>
		<style>
			html, body {
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			/*The Cytoscape Web container must have its dimensions set.*/
			#cytoscapeweb { width: 50%;
							height: 50%;
							margin: 2%;
							border-style: solid;
							border-width: 2px;
			}
		</style>
	</head>
	<body>
		<div id="cytoscapeweb">
			Cytoscape Web will replace the contents of this div with your graph.
		</div>
	</body>
</html>